<template>
  <el-form ref="form" :model="form" label-position="top" class="filterform">
    <el-form-item label="群名称：" class="mb-10">
      <el-select
        v-model="form.grouptype"
        placeholder=""
        size="small"
        class="mr-8"
        style="width: 126px"
      >
        <el-option label="含任意关键词" :value="1"></el-option>
        <el-option label="含所有关键词" :value="2"></el-option>
      </el-select>
      <!-- style="width: 226px" -->
      <el-input
        placeholder="可输入多个，按Enter确认"
        v-model="form.name"
        size="small"
        class="mt-3"
        :style="{width: `calc(100% - 136px)`}"
        @keyup.enter.native="handleAddLable"
      >
        <el-button
          slot="append"
          size="small"
          icon="el-icon-plus"
          @click="handleAddLable"
        ></el-button>
      </el-input>
    </el-form-item>
    <div v-if="form.labels.length" class="labelbox mt-5">
      <el-tag type="info" v-for="(item, index) in form.labels" closable :key="item" @close='removeLable(index)'>{{item}}</el-tag>
      <!-- <div
        class="labelitem c_text ml-5 mb-5"
        v-for="(item, index) in form.labels"
        :key="index"
      >
        {{ item }}
        <i class="el-icon-close commhover" @click="removeLable(index)"></i>
      </div> -->
    </div>
    <el-form-item label="群标签：" class="mb-10">
      <el-select
        v-model="form.labeltype"
        placeholder=""
        size="small"
        class="mr-8"
        style="width: 126px"
      >
        <el-option label="含任意关键词" :value="1"></el-option>
        <el-option label="含所有关键词" :value="2"></el-option>
        <el-option label="未打所有标签" :value="3"></el-option>
      </el-select>
      <multiple-select
        v-model="form.grouptags"
        size="small"
        placeholder="群标签"
        :width="`calc(100% - 136px)`"
        :isSelect='false'
        :receiverNameOpt="lableOpt"
      />
      
    </el-form-item>

    <el-form-item v-if="groupmaster" label="其他：" class="mb-10">
      <el-input
        :value="lableType == 1?'所属企微号':'是否群主/管理'"
        size="small"
        class="mr-8"
        style="width: 126px"
        placeholder=""
      />
      <el-select
        v-model="form.grouplabel"
        placeholder="请选择"
        size="small"
        clearable
        :style="{width: `calc(100% - 136px)`}"
        @change="handleChange"
      >
        <el-option label="群主/群管理员" :value="1"></el-option>
        <el-option label="群主" :value="2"></el-option>
        <el-option label="群成员" :value="3"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item :label="groupmaster?'':'其它：'" class="mb-10">
      <el-input
        value="群成员数"
        size="small"
        class="mr-8"
        style="width: 126px"
        placeholder=""
      />
      <!-- width="236" -->
      <el-popover placement="bottom-start" :width="groupmaster?236:550" v-model="visible">
        <div class="flex">
          <el-input
            v-model="form.min"
            placeholder="最小值"
            size="small"
            style="width: 90px"
          />
          <div class="linebox flexcenter">~</div>
          <el-input
            v-model="form.max"
            placeholder="最大值"
            size="small"
            style="width: 90px"
          />
        </div>
        <div>
          <el-button
            type="primary"
            class="w_full mt-10"
            size="mini"
            @click="submitNum"
            >确定</el-button
          >
        </div>
        <el-select
          slot="reference"
          :value="numberstr"
          placeholder="请选择"
          size="small"
          :style="{width: `calc(100% - 136px)`}"
          popper-class='nooption'	
        >
        </el-select>
      </el-popover>
    </el-form-item>
  </el-form>
</template>

<script>
import MultipleSelect from "@/components/MultipleSelect";
export default {
  data() {
    return {
      form: {
        grouptype: 1,
        name: "",
        labels: [],
        labeltype: 1,
        grouplabel: "",
        min: "",
        max: "",
        grouptags:[]
      },
      visible: false,
      numberstr: "",
      lableOpt: [
        { value: 1, label: "客户等级", children: ["一般", "重要", "核心"] },
        { value: 2, label: "客户等级2", children: ["一般2", "重要2", "核心2"] },
      ],
    };
  },
  props:{
    groupmaster:{
      type:Boolean,
      default:true
    },
    lableType:{
      type:Number|String,
      default:1
    }
  },
  components:{
    MultipleSelect
  },
  methods: {
    submitNum() {
      this.numberstr = this.form.min + " ~ " + this.form.max;
      console.log("this.numberstr:", this.numberstr);
      this.visible = false;
      this.handleChange()
    },

    handleAddLable() {
      if (this.form.name) {
        if (this.form.labels.includes(this.form.name)) {
          this.$message.warning("标签重复");
          return;
        }
        this.form.labels.push(this.form.name);
        this.form.name = "";
        this.handleChange()
      }
    },

    removeLable(index){
      this.form.labels.splice(index,1)
    },

    resetForm(){
      this.form = {
        grouptype: 1,
        name: "",
        labels: [],
        labeltype: 1,
        grouplabel: "",
        min: "",
        max: "",
        grouptags:[]
      }
      this.numberstr = ''
    },

    handleChange(){
      this.$emit('query',this.form)
    }
  },
};
</script>
<style lang="scss" scoped>
.linebox {
  width: 36px;
}
.el-form {
  ::v-deep .el-form-item__label {
    color: rgba($color: #000000, $alpha: 0.45);
    padding: 0;
    // margin-bottom: 5px;
  }
}
// .labelitem {
//   display: inline-block;
//   border-radius: 4px;
//   border: 1px solid #e9e9e9;
//   background-color: #fafafa;
//   padding: 2px 7px;
//   line-height: 22px;
// }
</style>